import "./transport.scss"
import PropTypes from 'prop-types'
import { lazy, Suspense, useState } from 'react'
import { useTitle, useFavicon, useExternal } from 'ahooks'
import { SingleA01, AccountSecretA01, ScanCodeA01 } from '../../Utils/SignUp'

const LoadSvg = lazy(() => import('../../Views/LoadSvg'))

const TransportLogin = ({ config }) => {
    TransportLogin.propTypes = { config: PropTypes.object }
    const { imageUrl, fullName, isScan } = config
    useTitle(fullName)
    useFavicon(imageUrl + 'Ico.ico')
    const [Active, setActive] = useState(true)
    useExternal(isScan && 'https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js')
    return (
        <Suspense fallback={<LoadSvg />}>
            <div className="TransportLogin">
                <img className="LoginBack" src={imageUrl + 'LoginBack.png'} alt="" />
                <div className="ScreenLogin__Box">
                    <div className="Top">
                        <img className="TopL" src={imageUrl + '01.png'} alt="" />
                        <img className="TopR" src={imageUrl + '01.png'} alt="" />
                    </div>
                    <div className="Box">
                        <div className="Title">系统登录</div>
                        {isScan ? <SingleA01 active={Active} toggle={setActive} /> : ''}
                        {Active ? <AccountSecretA01 config={config} /> : <ScanCodeA01 />}
                    </div>
                    <div className="Back">
                        <div className="item" style={{ '--i': 0 }}></div>
                        <div className="item" style={{ '--i': 1 }}></div>
                        <div className="item" style={{ '--i': 2 }}></div>
                        <div className="item" style={{ '--i': 3 }}></div>
                        <div className="item" style={{ '--i': 4 }}></div>
                        <div className="item" style={{ '--i': 5 }}></div>
                        <div className="item" style={{ '--i': 6 }}></div>
                        <div className="item" style={{ '--i': 7 }}></div>
                        <div className="item" style={{ '--i': 8 }}></div>
                        <div className="item" style={{ '--i': 9 }}></div>
                        <div className="item" style={{ '--i': 10 }}></div>
                        <div className="item" style={{ '--i': 11 }}></div>
                        <div className="item" style={{ '--i': 12 }}></div>
                        <div className="item" style={{ '--i': 13 }}></div>
                        <div className="item" style={{ '--i': 14 }}></div>
                        <div className="item" style={{ '--i': 15 }}></div>
                        <div className="item" style={{ '--i': 16 }}></div>
                        <div className="item" style={{ '--i': 17 }}></div>
                        <div className="item" style={{ '--i': 18 }}></div>
                        <div className="item" style={{ '--i': 19 }}></div>
                        <div className="item" style={{ '--i': 20 }}></div>
                    </div>
                </div>
            </div>
        </Suspense>
    );
};

export default TransportLogin